<template>
  <div class="createPost-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>卡片名称</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
        >操作按钮</el-button>
      </div>
      <el-form ref="postForm" label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="Importance:">
              <el-input placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Importance:">
              <el-input placeholder="请输入名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="Importance:">
              <el-input placeholder="请输入名称" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%"
      >
        <el-table-column align="center" label="ID" width="80">
          <template slot-scope="{ row }">
            <span>{{ row.id }}</span>
          </template>
        </el-table-column>

        <el-table-column min-width="300px" label="药品">
          <template slot-scope="{ row }">
            <el-select
              v-model="row.medicine"
              filterable
              remote
              reserve-keyword
              placeholder="请输入关键词"
              style="width: 100%"
              :remote-method="remoteMethod"
              :loading="loadingMedicine"
              @change="handleMedicineChange($event, row.id)"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name + '(' + item.label + ')'"
                :value="item.value"
              />
            </el-select>
          </template>
        </el-table-column>

        <el-table-column min-width="300px" label="Title">
          <template slot-scope="{ row }">
            <el-input
              v-model="row.title"
              class="edit-input"
              size="small"
              @input.native="handleTitleInput($event.target.value, row.id)"
            />
          </template>
        </el-table-column>

        <el-table-column min-width="300px" label="Short">
          <template slot-scope="{ row }">
            <el-input v-model="row.short" class="edit-input" size="small" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <div class="demo-drawer__footer">
      <el-button>取 消</el-button>
      <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { orgList } from '@/api/demo'
export default {
  name: 'TestDetail',
  props: {
    isCreate: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loadingMedicine: false, // 加载药品
      options: [
        { value: 1, label: 'amxl', name: '阿莫西林' },
        { value: 2, label: 'amlz', name: '奥美拉唑' },
        { value: 3, label: 'afwnm', name: '氨酚烷纳米' },
        { value: 4, label: 'b', name: 'B' }
      ],
      list: [
        { id: 1, medicine: 2, title: '1111', short: '' },
        { id: 2, medicine: 3, title: '2222', short: '' }
      ],
      states: [
        { value: 1, label: 'amxl', name: '阿莫西林' },
        { value: 2, label: 'amlz', name: '奥美拉唑' },
        { value: 3, label: 'afwnm', name: '氨酚烷纳米' },
        { value: 4, label: 'b', name: 'B' }
      ]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await orgList()
      console.log(res)
    },
    handleTitleInput(e, id) {
      const l = this.list.filter((m) => m.id === id)[0]
      if (l) {
        l.short = e + ' ...'
      }
    },
    submitForm() {
      console.log(this.list)
    },
    remoteMethod(query) {
      if (query !== '') {
        this.loadingMedicine = true
        setTimeout(() => {
          this.loadingMedicine = false
          this.options = this.states.filter((item) => {
            return item.label.toLowerCase().indexOf(query.toLowerCase()) > -1
          })
        }, 2000)
      } else {
        this.options = []
      }
    },
    handleMedicineChange(val, id) {
      const l = this.list.filter((m) => m.id === id)[0]
      if (l) {
        l.medicine = val
        const s = this.states.filter((m) => m.value === val)[0]
        if (s) {
          l.title = s.name
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin: 10px;
}
.demo-drawer__footer {
  position: absolute;
  width: 100%;
  text-align: right;
  bottom: 0;
  padding: 10px;
  border-top: 1px solid #ddd;
}
</style>
